<template>
  {{totalCount}}views/personal/index.vue {{ count }}--- {{ storeState.count }}
  <router-link to="/about">about</router-link>
  <!-- <router-link to="/test">test</router-link> -->
  <div class="item">
    <van-button type="primary" @click="toAboutPage" class="button">about</van-button>
  </div>
  <div class="item">
    <van-button type="primary" to="/test" class="button">test</van-button>
  </div>
  <van-config-provider :theme-vars="themeVars">
    <van-grid clickable :column-num="2">
        <van-grid-item icon="home-o" text="Home" to="/" />
        <van-grid-item icon="user-circle-o" text="Personal" to="/personal" :icon-color="iconColor" />
    </van-grid>
  </van-config-provider>
</template>

<script>
import { toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {Grid, GridItem, ConfigProvider, Button} from 'vant'
export default {
    name: "Dashboard",
    components: {
      [Grid.name]: Grid,
      [GridItem.name]: GridItem,
      [ConfigProvider.name]: ConfigProvider,
      [Button.name]: Button
    },
    setup() {
      const store = useStore()
      const router = useRouter()

      const {count} = toRefs(store.state)
      const {count:totalCount} = toRefs(store.state)
      
      return {
        totalCount,
        count,
        iconColor: 'red',
        storeState: store.state,
        toAboutPage: () => {
          router.push('/about');
        },
        themeVars: {
            // gridItemContentActiveColor: "red"
        }
      }
    }
}
</script>

<style>
.item {
  margin-top: 10px;
}
</style>